<template>
  <div class="select-seat-seat-view-container">
    <movable-area scale-area="true" class="defaultArea" :style="{ height: `${options.seatArea}px`, width: '750rpx' }">
      <movable-view class="movableOne" :style="{ height: `${options.seatArea}px`, width: '750rpx' }" scale="true"
        direction="all" scale-max="2" scale-min="1" out-of-bounds="true">
        <view class="seatArea" :style="{
          width: `${options.seatScaleHeight * options.maxX}px`,
          height: `${options.seatScaleHeight * options.maxY}px`,
        }">
          <!--中轴线  -->
          <view class="alignLine"></view>
          <view class="hallName">
            <view class="txt">{{ options.hallName }}</view>
          </view>
          <view v-for="(item, index) in options.seatList" :key="index" class="seatTap" :data-index="index"
            @click="clickSeat" :style="{
              left: `${(item.gCol - 1) * options.seatScaleHeight}px`,
              top: `${(item.gRow - 1) * options.seatScaleHeight}px`,
              width: `${options.seatScaleHeight}px`,
              height: `${options.seatScaleHeight}px`,
            }">
            <image :src="formatNowIcon(item)" class="normal" />
          </view>
        </view>
      </movable-view>
    </movable-area>
  </div>
</template>
<script setup lang="ts">
import { computed, toRefs } from "vue";
import * as seatConfig from "./seat_config";
const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
  arealist: {
    type: Array<any>,
    default: [],
  },
});

const { options, arealist } = toRefs(props);
console.log(options, arealist);

const emit = defineEmits(["onchange"]);
const clickSeat = (e) => {
  console.log(e);

  emit("onchange", e);
};
const getAreaIndex = (id) => {
  return arealist.value.findIndex((item) => {
    return item["area"] === id;
  });
};
const formatNowIcon: any = computed(() => {
  return (data) => {
    if (
      data.nowIcon.includes("kexuan.png") &&
      data.areaId !== "0" &&
      arealist.value.length > 0
    ) {
      return seatConfig.area_arr[getAreaIndex(data.areaId)];
    } else {
      return data.nowIcon;
    }
  };
});
</script>
<style lang="scss">
.select-seat-seat-view-container {
  display: flex;
  flex-direction: column;
  /*
*情侣座位的字体样式
*/

  .loveSeatDemo text {
    margin-left: 10rpx;
  }

  /*
*影厅图上方显示影厅名字区域
*/

  .hallName {
    width: 80%;
    height: 0;
    border-top: 40rpx solid #ccc;
    border-right: 20rpx solid transparent;
    border-left: 20rpx solid transparent;
    line-height: 30rpx;
    color: white;
    position: absolute;
    top: -100rpx;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /*
*影厅图上方显示影厅名字区域字体样式
*/

  .hallName .txt {
    font-size: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -35rpx;
    white-space: unset;
  }

  /*
*所有座位的区域
*/

  .seatArea {
    margin: 0 auto;
    font-size: 10rpx;
    position: relative;
  }

  /*
*中轴线
*/

  .alignLine {
    position: absolute;
    left: 50%;
    height: 100%;
    border-left: 1px dashed #aaa;
    transform: translateX(-100%);
  }

  /*
*选座区域普通座位的图片样式
*/

  .normal {
    position: relative;
    /* margin: 10rpx; */
    width: 100%;
    height: 100%;
  }

  /*
*选座区域情侣座位的图片样式
*/

  .LoveSeat {
    position: relative;
    /* margin: 10rpx 0;  */
    width: 70rpx;
    height: 70rpx;
  }

  /*
*所有座位的图片样式下方透明可点击区域
*/

  .seatTap {
    position: absolute;

    .areaitem {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .txt {
        font-size: 20px;
        color: #858a99;
        opacity: 0.3;
      }
    }
  }

  /*
*情侣座位的图片样式下方透明可点击区域
*/

  .LoveSeatTap {
    position: absolute;
    top: 0;
    width: 70rpx;
    height: 70rpx;
  }

  /*
* 座位图限制区域
*/

  movable-area {
    overflow: hidden;
  }

  /*
* 座位图可移动区域(座位图)
*/

  .movableOne {
    box-sizing: border-box;
    padding: 100rpx 60rpx;
    color: #fff;
  }

  /*
* 座位图可移动区域(左边座位排号栏)
*/

  .movableTwo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1400rpx;
    width: 30rpx;
    padding: 100rpx 0;
    color: #fff;
  }

  /*
* (左边座位排号栏整体)
*/

  .seatTool {
    width: 30rpx;
    padding: 100rpx 0;
    opacity: 0.5;
  }

  .seatToolArea {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50rpx;
  }

  /*
* (左边座位排号栏每一个块)
*/

  .seatTag {
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
